<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>扫码登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="lib/layui/css/layui.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        html {
            height: 100%;
        }

        .qrcodeBox {
            text-align: center;
        }

        .qrcodeBox .qrcode {
            margin: 40px auto;
            width: 200px;
            height: 200px;
            border: 1px solid #eeeeee;
            padding: 20px;
            box-shadow: 0 3px 3px 0 rgb(0 0 0 / 22%);
        }

        .qrcodeBox .connectFlag {
            font-size: 24px;
            line-height: 30px;
        }

        .qrcodeBox p {
            line-height: 30px;
            padding: 20px 0;
        }
    </style>
</head>

<body>
    <div class="qrcodeBox">
        <div id="qrcode" class="qrcode"></div>
        <div id="connectFlag" class="connectFlag">设备识别码：<span></span></div>
        <p>请使用微信扫一扫，核对信息后确认登录即可</p>
        <input id="refreshQrcode" class="layui-btn layui-btn-primary layui-border-blue" type="button" value="刷新二维码"
            disabled />
    </div>
    <script src="lib/layui/main.min.js" charset="utf-8"></script>
    <script>
        layui.config({
            base: "lib/layui/modules_ext/",
            version: true
        }).extend({
            qrcode: 'qrcode/qrcode', //  二维码生成库
        }).use(['qrcode'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                http = layui.http;

            //刷新二维码
            $('body').on('click', '#refreshQrcode', function () {
                if (window.ws_admin_login && window.ws_admin_login.readyState == 1) {
                    var data = {
                        reqid: '' + Math.random(),
                        action: 'refreshQrcode'
                    };
                    window.ws_admin_login.send(JSON.stringify(data));
                } else {
                    layer.msg('服务器连接中断', {}, function () {
                        location.reload();
                    });
                }
            });

            //建立连接
            http.ajaxPost('/admin/Index/authServer', {}, function (data) {
                window.ws_admin_login = new WebSocket(data.protocol + "://" + data.host + ":" + data.port);
                window.ws_admin_login.onopen = function () {
                    //获取二维码
                    $('#refreshQrcode').removeAttr("disabled").trigger("click");
                };

                window.ws_admin_login.onmessage = function (evt) {
                    var response = JSON.parse(evt.data);
                    if (response.type == 0) {
                        //响应处理
                        if (response.code !== 0) {
                            layer.msg(response.msg, {}, function () { });
                            return;
                        }
                        switch (response.action) {
                            case 'refreshQrcode':
                                var qrcodeText = (function (str) {
                                    var val = "";
                                    for (var i = 0; i < str.length / 2; i++) {
                                        val += String.fromCharCode(parseInt(str.substr(2 * i, 2), 16));
                                    }
                                    return val;
                                })(response.data.qrcode);
                                $("#qrcode").html('').qrcode({
                                    render: "canvas",
                                    text: qrcodeText,
                                    width: "200",
                                    height: "200",
                                });
                                $('#connectFlag span').html(response.data.flag);
                                break;
                        }
                    } else if (response.type == 1) {
                        //推送处理
                        switch (response.action) {
                            case 'authSuccess':
                                http.ajaxPost('/admin/Index/authLogin', {
                                    auth_token: response.data.auth_token,
                                }, function (data) {
                                    localStorage.setItem(http.tokenKey, data.token);
                                    var droppedUrl = sessionStorage.getItem(http.dropedKey);
                                    if (!droppedUrl) droppedUrl = 'index.html';
                                    sessionStorage.removeItem(http.dropedKey);
                                    if (top.location != self.location) {
                                        top.location = droppedUrl;
                                    } else {
                                        window.location = droppedUrl;
                                    }
                                });
                                break;
                        }
                    }
                };
            });
        });
    </script>
</body>

</html>